<template>
  <!-- 整个用户账户管理容器 -->
  <div class="contationAccount">
    <!-- 一行布局 -->
    <el-row>
      <!-- 占满一行 -->
      <el-col :span="24">
        <!-- 内联表单，用于查询用户信息 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 姓名输入框 -->
          <el-form-item label="姓名">
            <el-input v-model="formInline.username" placeholder="请填写姓名"></el-input>
          </el-form-item>
          <!-- 性别选择框 -->
          <el-form-item label="性别">
            <el-select v-model="formInline.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <!-- 联系方式输入框 -->
          <el-form-item label="联系方式">
            <el-input v-model="formInline.phonenumber" placeholder="请填写联系方式"></el-input>
          </el-form-item>
          <!-- 查询和重置按钮 -->
          <el-form-item>
            <el-button style="margin-top: 0;" type="primary" @click="loadData">查询</el-button>
            <el-button type="primary" @click="RestSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div>
      <!-- 用户数据表格，支持分页显示 -->
      <el-table :data="UsersData.slice((currentPage-1)*PageSize,currentPage*PageSize)" border >
        <!-- ID 列 -->
        <el-table-column prop="id"          label="ID"        width="100"></el-table-column>
        <!-- 用户名列 -->
        <el-table-column prop="uname"       label="用户名"     width="100"></el-table-column>
        <!-- 真实姓名列 -->
        <el-table-column prop="username"    label="真实姓名"   width="100"></el-table-column>
        <!-- 性别列 -->
        <el-table-column prop="sex"         label="性别"       width="80"></el-table-column>
        <!-- 生日列 -->
        <el-table-column prop="birthday"    label="生日"     width="120"></el-table-column>
        <!-- 住址列 -->
        <el-table-column prop="address"     label="住址"     width="300"> </el-table-column>
        <!-- 联系方式列 -->
        <el-table-column prop="phonenumber" label="联系方式"  width="200"> </el-table-column>
        <!-- 邮箱列 -->
        <el-table-column prop="mail"        label="邮箱"      width="200"> </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作">
          <!-- 自定义操作列内容 -->
          <template slot-scope="scope">
            <el-button @click="EditAccount(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="DeleteAccount(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button @click="resetAccount(scope.row.id)" type="text" size="small">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination background
        :page-sizes="[12, 20, 30, 40]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="UsersData.length"
        @current-change="CurrentChange"
        @size-change="SizeChange"
        >
      </el-pagination>
      <!-- 修改用户信息弹出层 -->
      <el-dialog
        title="修改用户信息"
        :visible.sync="dialogVisible"
        width="45%"
        :beforeClose="closedialog"
        :close-on-click-modal="false"
        >
        <div>
          <!-- 用户信息表单 -->
          <el-form ref="User" :model="User"  :rules="rules" label-width="80px">
            <!-- 头像上传行 -->
            <el-row>
              <el-col :span="20" :offset="1">
                <el-form-item label="用户头像" prop="address">
                  <!-- 图片上传组件 -->
                  <el-upload
                    action=""
                    :limit="1"
                    :multiple="false"
                    list-type="picture-card"
                    :auto-upload="false"
                    :file-list="fileList"
                    :http-request="uploadFile"
                    ref="upload"
                    >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 用户姓名和性别行 -->
            <el-row>
              <el-col :span="9" :offset="1">
                <el-form-item label="用户姓名" prop="username">
                  <el-input v-model="User.username"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="1">
                <el-form-item label="用户性别" prop="sex">
                  <el-select v-model="User.sex" placeholder="请选择用户性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 联系方式和邮箱行 -->
            <el-row>
              <el-col :span="9" :offset="1">
                <el-form-item label="联系方式" prop="phonenumber">
                  <el-input v-model.number="User.phonenumber" placeholder="请填写用户联系方式"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="1">
                <el-form-item label="Email" prop="mail">
                  <el-input v-model="User.mail" placeholder="请填写用户Eamil"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 生日选择行 -->
            <el-row>
              <el-col :span="23" :offset="1">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                    v-model="User.birthday"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 用户住址行 -->
            <el-row>
              <el-col :span="22" :offset="1">
                <el-form-item label="用户住址" prop="address">
                  <el-input type="textarea" v-model="User.address" rows="5" maxlength="100" placeholder="请填写交易地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 确认修改按钮行 -->
            <el-row>
              <el-col :span="3" :offset="20">
                <el-button type="primary" @click="submitForm('User')">确认修改</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-dialog>
    </div>
    <!-- 添加页脚组件 -->
    <Footer />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 存储用户数据列表
        UsersData: [],
        // 当前要编辑的用户信息
        User:{file:'1'},
        // 当前页码
        currentPage: 1,
        // 每页显示的数据条数
        PageSize:12,
        // 编辑用户信息弹窗是否显示
        dialogVisible: false,
        // 查询表单数据
        formInline: {
          username: null,
          sex: null,
          phonenumber: null
        },
        // 上传文件列表
        fileList: [],
        // 表单验证规则
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur' }
          ],
          phonenumber: [
            { required: true, message: '联系方式不能为空', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'blur' }
          ],
          mail: [
            { required: true, message: '用户邮箱不能为空', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '用户住址不能为空', trigger: 'blur' }
          ],
          details: [
            { required: true, message: '请填写商品描述', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '请选择用户生日', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      // 组件创建时加载用户数据
      this.loadData();
    },
    methods:{
      // 请求用户数据列表
      loadData(){
        // 发送 POST 请求获取用户数据
        this.$axios.post('/Buser/selectUserList',{
          username: this.formInline.username,
          sex: this.formInline.sex,
          phonenumber: this.formInline.phonenumber
        }).then(res => {
          // 将响应数据赋值给 UsersData
          this.UsersData = res.data;
        });
      },
      // 重置查询表单并重新加载数据
      RestSubmit() {
        this.formInline = {
          username: null,
          sex: null,
          phonenumber: null
        };
        this.loadData();
      },
      // 编辑用户操作
      EditAccount(res){
        // 显示编辑用户信息弹窗
        this.dialogVisible = true;
        // 将当前要编辑的用户信息赋值给 User
        this.User = res;
        // 将用户头像路径添加到文件列表
        this.fileList.push({url:this.User.userimgpath});
      },
      // 删除用户操作
      DeleteAccount(id){
        // 弹出确认删除提示框
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送 GET 请求删除用户
          this.$axios.get('/user/deleteUserById',{
            params:{id:id}
          }).then(res => {
            if(res.data == 1){
              // 删除成功提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              // 删除失败提示
              this.$message({
                type: 'info',
                message: '删除失败!'
              });
            }
            // 刷新数据列表
            this.loadData();
          });
        }).catch(() => {
          // 取消删除提示
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 重置用户账户密码
      resetAccount(id){
        // 弹出确认重置提示框
        this.$confirm('是否重置该用户账户？','提示', {
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type: 'warning'
        }).then(res => {
          // 发送 GET 请求重置用户账户密码
          this.$axios.get('/user/restAccountById',{
            params:{id:id}
          }).then(res => {
            if(res.data == 1){
              // 重置成功提示
              this.$message({
                type: 'success',
                message: '账户重置成功! 新密码：123456'
              });
            }else{
              // 重置失败提示
              this.$message({
                type: 'success',
                message: '账户重置失败!'
              });
            }
          })
        }).catch(() => {
          // 取消重置提示
          this.$message({
            type: 'info',
            message: '已取消重置'
          });
        })
      },
      // 提交用户表单
      submitForm(User) {
        // 验证表单数据
        this.$refs[User].validate((valid) => {
          if (valid) {
            // 表单验证通过，提交图片
            this.subPicForm();
          } else {
            return false;
          }
        });
      },
      // 上传图片方法
      subPicForm(){
        // 创建 FormData 对象用于上传文件
        this.formDate = new FormData();
        // 提交上传文件
        this.$refs.upload.submit();
        let config = {
            headers: {
                // 设置请求头为 multipart/form-data
                'Content-Type': 'multipart/form-data'
            }
        };
        // 发送 POST 请求上传图片
        this.$axios.post("/fileUpload/imgUpload", this.formDate,config).then( res => {
          // 文件列表数组字符串化
          if(res.data[0] != null){
            // 将上传后的图片地址赋值给用户信息中的 userimgpath
            this.User.userimgpath = res.data[0];
          }
          // 提交用户信息
          this.subUserForm();
        });
      },
      // 修改用户信息方法
      subUserForm(){
        // 发送 POST 请求修改用户信息
        this.$axios.post('/user/updateUserById', {
          id: this.User.id,
          username: this.User.username,
          userimgpath: this.User.userimgpath,
          phonenumber: this.User.phonenumber,
          mail: this.User.mail,
          address: this.User.address,
          sex: this.User.sex
        }).then(res => {
          if(res.data == 1){
            // 修改成功提示
            this.$message({
              message: '用户信息修改成功！',
              type: 'success'
            });
          }
        })
      },
      // 上传图片
      uploadFile(file){
        // 将文件添加到 FormData 对象中
        this.formDate.append('file', file.file);
      },
      // 关闭修改弹窗回调方法
      closedialog(){
        // 隐藏弹窗
        this.dialogVisible = false;
        // 清空当前要编辑的用户信息
        this.User = {};
        // 清空文件列表
        this.fileList = [];
      },
      // 页码改变事件处理方法
      CurrentChange(val) {
        // 更新当前页码
        this.currentPage=val;
      },
      // 每页显示条数改变事件处理方法
      SizeChange(val) {
        // 更新每页显示的数据条数
        this.PageSize = val;
      }
    }
  }
</script>

<style>
  /* 表格样式 */
  .el-table{
    text-align-last: center;
    height: 733px;
    overflow: auto;
  }
  /* 容器样式 */
  .contationAccount{
    padding: 20px;
    margin: 10px;
    margin-top: 0;
    min-height: 855px;
    width: 96%;
    background-color: #FFFFFF;
  }
  /* 分页组件样式 */
  .el-pagination{
    margin: 30px;
    float: right;
  }

  /* 图片样式 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
  }
  .avatar {
    width: 128px;
    height: 128px;
    display: block;
  }

  /* 移动端适配 */
  @media screen and (max-width: 768px) {
    .contationAccount {
      padding: 10px;
      margin: 5px;
      width: 100%;
    }
    .el-pagination {
      margin: 10px;
      float: none;
      text-align: center;
    }
  }
</style>